$(function () {
	var delParent;
	var defaults = {
		fileType: ["jpg", "png", "bmp", "jpeg"], // 上传文件的类型
		fileSize: 1024 * 1024 * 10 // 上传文件的大小 10M
	};


	var fileList;
	/*点击图片的文本框*/
	$(".file").change(function () {
		console.log($(this));
		console.log("上传图片改变");
		var idFile = $(this).attr("id");
		console.log(idFile); // picfile 
		var file = document.getElementById(idFile);
		console.log(file);
		var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
		 fileList = file.files; //获取的图片文件
		console.log(fileList);
		console.log(fileList + "======filelist=====");
		var input = $(this).parent(); //文本框的父亲元素
		var imgArr = [];
		//遍历得到的图片文件
		var numUp = imgContainer.find(".up-section").length;
		var totalNum = numUp + fileList.length; //总的数量
		if (fileList.length > 5 || totalNum > 5) {
			alert("上传图片数目不可以超过5个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过10个
		} else if (numUp < 5) {
			fileList = validateUp(fileList);
			for (var i = 0; i < fileList.length; i++) {
				var imgUrl = window.URL.createObjectURL(fileList[i]);
				imgArr.push(imgUrl);

				var $section = $("<section class='up-section fl loading'>");
				imgContainer.prepend($section);
				var $span = $("<span class='up-span'>");
				$span.appendTo($section);

				var $img0 = $("<img class='close-upimg'>").on("click", function (event) {
					console.log("点击删除图标");
					event.preventDefault();
					event.stopPropagation();
					$(".works-mask").show();
					delParent = $(this).parent();
					// console.log(delParent);   //  要删除 的section
				});
				// console.log($img0);   添加删除图标 以及 图片信息 
				$img0.attr("src", "tuyin/images/img/a7.png").appendTo($section);
				var $img = $("<img class='up-img up-opcity'>");
				$img.attr("src", imgArr[i]);
				$img.appendTo($section);
                                var $upfile = $("<input type='hidden' name='uploads[]' />");
                                $upfile.val(imgArr[i]);
                                $upfile.appendTo($section);
				var $p = $("<p class='img-name-p'>");
				$p.html(fileList[i].name).appendTo($section);
				var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
				$input.appendTo($section);
				var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
				$input2.appendTo($section);


			}
		}
		setTimeout(function () {
			$(".up-section").removeClass("loading");
			$(".up-img").removeClass("up-opcity");
		}, 450);
		numUp = imgContainer.find(".up-section").length;
		if (numUp >= 5) {
			$(this).parent().hide();
		}

		//input内容清空
		//$(this).val("");

		return fileList;
	});



	$(".z_photo").delegate(".close-upimg", "click", function () {
		$(".works-mask").show();
		delParent = $(this).parent();

	});

	$(".wsdel-ok").click(function () {
		console.log("取消该图片");

              var index = delParent.parent().children().index(delParent);
              fileList.splice(index,1);
		// 图片 取消 上传 

		// console.log(fileList[0]);
		// fileList.splice(2,1);
		// console.log(fileList);
		console.log(delParent[0]);
		// return fileList;
		// fileList里面内容一样  所以 可以直接上传
		// $(".file").change();
		// fileList = validateUp(fileList)

		$(".works-mask").hide();
		var numUp = delParent.siblings().length;
		if (numUp < 6) {
			delParent.parent().find(".z_file").show();
		}
		delParent.remove();
                return fileList;

	});

	$(".wsdel-no").click(function () {
		$(".works-mask").hide();
	});



	// 验证 
	function validateUp(files) {
		var arrFiles = []; //替换的文件数组
		for (var i = 0, file; file = files[i]; i++) {
			//获取文件上传的后缀名
			var newStr = file.name.split("").reverse().join("");
			if (newStr.split(".")[0] != null) {
				var type = newStr.split(".")[0].split("").reverse().join("");
				console.log(type + "===type===");
				if (jQuery.inArray(type, defaults.fileType) > -1) {
					// 类型符合，可以上传
					if (file.size >= defaults.fileSize) {
						alert(file.size);
						alert('您这个"' + file.name + '"文件大小过大');
					} else {
						// 在这里需要判断当前所有文件中
						arrFiles.push(file);
					}
				} else {
					alert('您这个"' + file.name + '"上传类型不符合');
				}
			} else {
				alert('您这个"' + file.name + '"没有类型, 无法识别');
			}
		}


		console.log(arrFiles);
		return arrFiles;
	}





	// 图片上传 ！！！！！！！！！！！
	$('#picsubmit').click(function (e) {
		console.log("我投哦");
		console.log(fileList);
		console.log("上传了");
		var formData= new FormData();
		e.preventDefault();
		// var pic = new FormData('files', fileList);
		for (var i = 0; i < fileList.length; i++) {　　　　　　　　　　　　 //FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
			　　　　　　　　　　　　 //注意：如果你的服务器端是PHP那么为了与php命名习惯一致在名称中需要添加[]，如formData.append('files[]',files[i]);
			formData.append('files', fileList[i]);
		}
		console.log(formData);

		var xhr= new XMLHttpRequest();
		xhr.open('POST', './uploadpic.php');
		xhr.onreadystatechange = function(){
				if (xhr.readyState== 4&& xhr.status== 200){
						console.log('上传成功'+xhr.responseText);
						//处理其他数据，这里根据需要进行调整
				}
		};
		xhr.send(formData);

		console.log("结束");
});

		// $.ajax({
		//   type:"post",
		//   // 接口需要改动 ！！！！！！
		//   url:"./uploadpic.php",
		//   dataType:'json',  //如果后端返回的相应头有text/html
		//   data: formData,
		//   success:function (data) {

		// 			console.log("success");
		// 		},
		// 	error:function(){

		// 		console.log(error);
		// 	}


		// });






















})